<template>
    <div class="tag-main" style="margin-bottom: 15px;">
        <el-tag v-for="tag in tags"
            :key="tag.name"
            class="mx-1"
            closable
            :type="tag.type"
            @close="handleClose(tag)"
        >
            {{ tag.name }}
        </el-tag>
    </div>
</template>

<script setup>
    import { ref } from 'vue'

    const tags = ref([
        { name: 'Tag 1', type: '', },
        { name: 'Tag 2', type: 'success' },
        { name: 'Tag 3', type: 'info' },
        { name: 'Tag 4', type: 'warning' },
        { name: 'Tag 5', type: 'danger' },
    ])

    const handleClose = (tag) => {
        tags.value.splice(tags.value.indexOf(tag), 1)
        console.log(tag)
    }
</script>

<style scoped>
.tag-main{
    display: flex;
    align-items: center;
    width: 100%;
    height: 5%;
    background-color: rgb(177, 162, 142);
}
.el-tag{
    width: 80px;
    height: 25px;
    margin-left:10px;
}
</style>